"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Pencil } from "lucide-react"
import { EditProfileDialog } from "@/components/edit-profile-dialog"
import type { UserProfile } from "@/types/user"

interface EditProfileButtonProps {
    profile: UserProfile
}

export function EditProfileButton({ profile }: EditProfileButtonProps) {
    const [open, setOpen] = useState(false)
    const [currentProfile, setCurrentProfile] = useState(profile)

    const handleProfileUpdate = (updatedProfile: Partial<UserProfile>) => {
        setCurrentProfile((prev) => ({ ...prev, ...updatedProfile }))
    }

    return (
        <>
            <Button variant="secondary" size="sm" className="flex items-center gap-1" onClick={() => setOpen(true)}>
                <Pencil className="h-4 w-4" />
                编辑个人资料
            </Button>

            <EditProfileDialog
                open={open}
                onOpenChange={setOpen}
                profile={currentProfile}
                onProfileUpdate={handleProfileUpdate}
            />
        </>
    )
}

